<template>
	<!-- 搜索框 -->
	<view>
		<view class="search">
			<view class="search-bar">
				<input type="text" placeholder="输入需要搜索的内容" class="search-input"/>
				<view class="search-img">
					<image src="/static/搜索@2x.png"></image>
				</view>
			</view>
			<!-- 历史搜索记录 -->
		<view class="history-wrapper">
		  <!-- 历史记录标签 -->
		  <text class="history-label">历史记录：</text>
		  <!-- 历史记录项容器 -->
		    <text class="history-item">飞飞汽车美容店</text>
		    <text class="history-item">飞飞汽修美容店</text>
		    <text class="history-item">飞飞汽车美容店</text>
		    <text class="history-item">飞飞汽修美容店</text>
		    <text class="history-item">飞飞汽修美容店</text>
		</view>
		</view>

		<view class="content">
			<view class="card-list">
				<!-- 展示内容 -->
				<view class="content-item" 
				v-for="(card, index) in cardList"
				:key="index">
					<view class="title">
						<view class="content-title">车百事汽车生活馆</view>
						<view class="content-distance">556m</view>
					</view>
					
					<view class="sub-title">
						<view class="score"> 
						<uni-rate :readonly="true" :value="4" size="20" />
						<text>4分</text>
						</view>
						<view class="sales">销量：446</view>
					</view>
					
					<view class="info">
						<view class="image">
							<image src="/static/carlife.jpeg"></image>
						</view>
						<view class="otherinfo">
							<text>营业时间：周一到周五</text>
							<text>早上8：00-晚上22：00</text>
							<text>山阳区人民路与解放路交叉口</text>
						</view>
						
					</view>
				</view>
			</view>

		</view>
		
		
		
	</view>


</template>

<script>
	export default {
		data() {
			return {
				cardList:["1","2"]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.search-bar {
		display: flex;
		align-items: center;
		height: 80rpx;
		padding: 0 20rpx;
		margin: 20rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 40rpx;
		background-color: #f5f5f5;
	}
	
	.search-input {
		flex: 1;
		height: 60rpx;
		padding: 0 20rpx;
		border: none;
		background: transparent;
		font-size: 28rpx;
	}
	
	.search-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
	
	.search-img image {
		width: 100%;
		height: 100%;
	}
	.search{
		padding: 15rpx ;
		height: 25vh;
		background-color: #1f73f1;

	}
	.history-wrapper{
		display: flex;
		margin-left: 20rpx;
		flex-wrap: wrap;
	}
	.history-item{
		margin-left: 25rpx;
		color: #c6dbfa;
	}
	.history-label{
		color: #ffffff;
		font-size: 40rpx;
	}
	.title{
		display: flex;
		justify-content: space-between;
	}
	.sub-title{
		display: flex;
	}
	.score{
		display: flex;
	}
	.score text{
		margin-left: 10rpx;
		margin-top: -7rpx;
		font-size: 10rpx;
	}
	.sales{
		margin-left: 50rpx;
	}
	.info{
		margin-top: 20rpx;
		display: flex;
		vertical-align: middle;
	}
	.image{
		width: 300rpx;
		height: 200rpx;
		
	}
	.info image{
		width: 300rpx;
		height: 200rpx;
		border-radius: 30rpx;
	}
	.content{
		height: 75vh;
		padding: 0 20rpx;
		background-color: #f8f8f8;

	}
	.content-item{
		width: 670rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		margin-bottom: 50rpx;
	}
	
	/* 第一个卡片使用transform向上移动 */
	.content-item:first-child {
		transform: translateY(-60rpx);
		z-index: 10;
		margin-bottom: -10rpx; /* 减少底部间距，避免影响后续卡片 */
	}
	.otherinfo{
		margin-left: 15rpx;
		display: flex;
		flex-direction: column;
		line-height: 55rpx;
	}
	.content-title{
		font-size: 40rpx;
		font-weight: bold;
	}
	.content-distance{
		color: #398afe;
	}
	.card-list{
		position: relative;
	}
</style>
